<template>
  <div class="app-container home">
   <el-row :gutter="1">
  <el-link class="right-btn1" type="primary" @click="denglu1"  size="medium">个人中心</el-link>
  </el-row>
    <el-link class="right-btn" type="primary" @click="denglu"  size="medium">政小达智能问答</el-link>
    <img :src="src">
    <el-row :gutter="20">
    <h3 style="color:#B10000;">全国政策实时数据情况：</h3>
    	<div class="student">
							<div class="studentcontent" @click="gostudent">
								<div class="studentName">2022年政策总数</div>
								<div class="studentNum" style="color:#B10000;">{{s1}}</div>
					
							</div>
							<div class="studentcontent" @click="gostudent">
								<div class="studentName">2021年政策总数</div>
								<div class="studentNum" style="color:#FE6B22;">{{s2}}</div>
							
							</div>
							<div class="studentcontent" @click="gostudent">
								<div class="studentName">2020年政策总数</div>
								<div class="studentNum" style="color:#13B593;">{{s3}}</div>
								
							</div>
							<div class="studentcontent" @click="gostudent">
								<div class="studentName">2019年政策总数</div>
								<div class="studentNum" style="color:#666666;">{{s4}}</div>
								
							</div>
						</div>
              <el-col :sm="24" :lg="24">
     <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="16">
          <el-form-item label-width="3px" label="" prop="field101">
            <el-input  icon="el-icon-camera-solid
" v-model="formData.field101" placeholder="请输入"   clearable :style="{width: '100%'}">

           </el-input>
          </el-form-item> 
        </el-col>
        <el-col :span="8">
        
          <el-form-item label-width="3px" label="" prop="field102"> 
          <el-tooltip class="item" effect="dark" content="按图片搜索" placement="bottom">
        <el-button type="primary" icon="el-icon-camera-solid" title="按图片搜索" @click="Jump" size="medium" corol="white"> </el-button>
    </el-tooltip>
         <el-tooltip class="item" effect="dark" content="按语音搜索" placement="bottom">
      <el-button type="primary" icon=" el-icon-microphone"  @click="Jump" size="medium" corol="white"> </el-button>
    </el-tooltip>
            
          
            <el-button type="primary" icon="el-icon-search"  @click="Jump" size="medium"> 搜索</el-button>
          </el-form-item>
        </el-col>
         <el-col :xs="24" :sm="24" :md="20" :lg="8">
      
        <el-card class="update-log">
          <div slot="header" class="clearfix"><van-icon name="fire"  color="Red"/>
            <span  >政策热搜</span>
          </div>
          <div class="body">
            <p>
              <i ></i><el-link class="el-icon-upload2"
                href="http://www.ruoyi.vip"
                target="_blank"
                >中共中央 国务院关于做好2023年全面推进乡村振兴重点工作的意见 2023-03-11</el-link
              >
            </p>
            <p >
              <i ></i> 
               <a href="https://jq.qq.com/?_wv=1027&k=0fsNiYZt" target="_blank" class="el-icon-star-off">
               国务院关于印发《国务院工作规则》的通知  2023-03-24</a
              >
            </p>
           <p>
              <i ></i><el-link class="el-icon-star-off"
                href="http://www.ruoyi.vip"
                target="_blank"
                >国务院关于在海南省暂时调整实施有关行政法规规定的通知  2023-03-21</el-link
              >
            </p>
              <p>
              <i ></i><el-link
               class="el-icon-star-off" href="http://www.ruoyi.vip"
                target="_blank"
                >中共中央办公厅 国务院办公厅印发《关于进一步完善医疗卫生服务体系的意见》</el-link
              >
            </p>
            
          </div>
        </el-card>
      </el-col>

 <el-col :xs="24" :sm="24" :md="20" :lg="8">
      
        <el-card class="update-log">
          <div slot="header" class="clearfix"><van-icon name="clock" color="Blue" />
            <span  >最近政策</span>
          </div>
          <div class="body">
            <p>
              <i ></i><el-link
               class="el-icon-upload2" href="http://www.ruoyi.vip"
                target="_blank"
                >新时代的中国网络法治建设</el-link
              >
            </p>
            <p >
              <i ></i> 
               <a href="https://jq.qq.com/?_wv=1027&k=0fsNiYZt" target="_blank"class="el-icon-star-off">
               中共中央 国务院印发《数字中国建设整体布局规划》</a
              >
            </p>
           <p>
              <i ></i><el-link
                href="http://www.ruoyi.vip"
                target="_blank" class="el-icon-star-off"
                >中共中央 国务院印发《质量强国建设纲要》</el-link
              >
            </p>
              <p>
              <i ></i><el-link
                href="http://www.ruoyi.vip"
                target="_blank" class="el-icon-star-off"
                >两会受权发布企业税收优惠政策</el-link
              >
            </p>
            
          </div>
        </el-card>
      </el-col>
       <el-col :xs="24" :sm="24" :md="20" :lg="8">
      
        <el-card class="update-log">
          <div slot="header" class="clearfix"><van-icon name="map-marked" corol="Blue" />
            <span  >本地政策</span>
          </div>
          <div class="body">
            <p>
              <i ></i><el-link
                href="http://www.ruoyi.vip"
                target="_blank"class="el-icon-upload2"
                >长沙市人民政府关于印发《长沙市碳达峰实施方案》通知</el-link
              >
            </p>
            <p >
              <i ></i> 
               <a href="https://jq.qq.com/?_wv=1027&k=0fsNiYZt" target="_blank"class="el-icon-star-off">
               长沙市人民政府关于营造更好发展环境支持民营企业的意见</a
              >
            </p>
           <p>
              <i ></i><el-link
                href="http://www.ruoyi.vip"
                target="_blank"class="el-icon-star-off"
                >长沙市人民政府关于明确湖南湘江新区经济社会管理有关事项的意见</el-link
              >
            </p>
              <p>
              <i ></i><el-link
                href="http://www.ruoyi.vip"
                target="_blank"class="el-icon-star-off"
                >长沙市人民政府关于印发《长沙市完善进出口商品质量安全预警报告》</el-link
              >
            </p>
            
          </div>
        </el-card>
      </el-col>
      <el-button class="right-btn" type="primary" icon="el-icon-search"  @click="qiandao"  size="medium"> 每日签到</el-button>
      </el-form>
    </el-row>
  </div>
        </el-col>

        <hr />
      </el-col>
    </el-row>
    
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {

    return {
      src: require( '@/assets/logo/logo.png'),
        leftVal:0,  // 轮播图盒子的偏移值
        flag:true, // 用来节流防止重复点击
        start:null, // 自动执行下一张定的时器
        imgWidth:500,  // 在这里填写你需要的图片宽度
        ition:0.8, // 设置轮播图过度时间
        imgShow:0, // 表示当前显示的图片索引
      // 版本号
      version: "3.8.4",
      s1:"548.4w",
      s11:"91.4w",
      s2:"457.4w",
      s22:"116.4w",
      s3:"376w",
      s33:"50w",
      s4:"291w",
      s44:"60w",
       formData: {
        field101: undefined,
        field102: undefined,
      },
      rules: {
        field101: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
      },
    };
  },
   mounted() {
     this.$el.style.setProperty('logo',`url("${require('../assets/logo/logo.png')}")`)
      this.奥力给() // 偷偷告诉大家一个小秘密,JavaScript是原生支持中文命名函数或变量的哦
    },
  methods: {
     denglu1() {
      let newUrl = this.$router.resolve({
        path: "/profile",
        query: {
          data: JSON.stringify(),
        },
      });
      window.open(newUrl.href, "_blank");
    },
    qiandao() {
      let newUrl = this.$router.resolve({
        path: "/qiandao",
        query: {
          data: JSON.stringify(),
        },
      });
      window.open(newUrl.href, "_blank");
    },
     denglu() {
      let newUrl = this.$router.resolve({
        path: "/robot",
        query: {
          data: JSON.stringify(),
        },
      });
      window.open(newUrl.href, "_blank");
    },
    Jump(name) {
       this.$router.push({name: 'Test',params:{ index:'1'}});
      let newUrl = this.$router.resolve({
        path: "/sousuo1",
        query: {
          name: '乡村振兴',
        },
      });
      window.open(newUrl.href, "_blank");
    },

       gostudent() {
      let newUrl = this.$router.resolve({
        path: "/student",
        query: {
          data: JSON.stringify(),
        },
      });
      window.open(newUrl.href, "_blank");
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    MouseFun(type){// 停止定时器            // 重新执行定时器
        type=='移入'?clearTimeout(this.start):this.奥力给()
      },
      // 此为自动轮播定时器
      奥力给(){
          this.start = setInterval(()=>{
          this.NextFun()
        },1500)
      },
      // 这里通过额外封装的节流函数触发 PrevFun() 和 NextFun(),以达到防止重复点击的效果
      throttle(fun) {
      	if (this.flag) {
      		this.flag = false;
      		fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数
      	  setTimeout(() => {
      			this.flag = true;
      		}, 1200); // 节流间隔时间
      	}
      },
      // 上一张
      PrevFun(){
        if(this.leftVal==0){ // 判断显示的图片 是 第一张时执行
          // this.imgList.length是指循环图片数组的图片个数
          this.ition=0 // 将过渡时间变成0，瞬间位移到最后一张图
          this.imgShow=this.imgList.length-1 // 将高亮小点改为最后一张图
          this.leftVal=(this.imgList.length)*this.imgWidth // 瞬间移动
           setTimeout(()=>{  // 通过延时障眼法,归原过渡时间,执行真正的“上一张”函数
             this.ition=0.8
             this.leftVal -= this.imgWidth
           },this.ition*1000)
        }else{ // 判断显示的图片 不是 第一张时执行
           this.ition=0.8
           this.leftVal -= this.imgWidth
           this.imgShow--
        }
      },
      // 下一张
      NextFun(){
        if(this.leftVal==(this.imgList.length-1)*this.imgWidth){ // 判断显示的图片 是 最后一张时执行
             this.ition=0.8
             this.leftVal+=this.imgWidth
             this.imgShow=0
           setTimeout(()=>{
             this.ition=0
             this.leftVal=0
           },this.ition*1000)
        }else{ // 判断显示的图片 不是 最后一张时执行
           this.ition=0.8
           this.leftVal+=this.imgWidth
           this.imgShow++
        }
      },
      // 点击小圆点
      instFun(index){
        this.ition=0.8
        this.leftVal=index*this.imgWidth
        this.imgShow=index
      },

    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
 .logo{
     logo:url('../assets/logo/logo.png');
     background-image:logo;
 }
.right-btn {
  float: right;    // 靠右
  height: 100%;
  line-height: 50px;   // 行高
}
 .SwiperBox {
    position: relative;
    width: 500px;
    height: 300px;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
  }
  .imgBox{
    position: absolute;
    top: 0px;
    left: 0px;
    min-width: 500px;
    height: 300px;
    display: flex;
    justify-content: flex-start;
  }
  /* 图片默认样式 */
  .imgBox img {
    display: flex;
    flex-shrink: 0;
    width: 500px;
    height: 300px;
  }
   /* 两个按钮共有的样式,也可直接使用箭头图片替代 */
  .leftBtn,
  .rightBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(109, 109, 109, 0.445);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
  }
  .leftBtn {
    left: 10px;
  }
  .rightBtn {
    right: 10px;
  }
  /* 下方指示器盒子 */
  .instBox{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
  }
   /* 小圆点 */
  .inst{
    width: 10px;
    height: 10px;
    border: 1px solid #ccc;
    margin-right: 8px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
  }
  .inst:last-child{
    margin-right: 0px;
  }
  .instActv{
    border: 1px solid #ff0000;
    background: #ff0000;
  }
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.student{
	height: 80px;
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 30px;
}
.studentcontent{
	width: 130px;
	height: 70px;
	cursor: pointer;
}
.studentname{
	padding:0 30px 0 20px ;
	height: 35px;
	display: flex;
	background-color: white;
	justify-content: space-between;
	font-size: 14px;
	align-items: center;
}
.studentTime{
	color: #9195a3;
	font-size: 13px;
}
.studentName{
	text-align: center;
	color: #393939;
  font-size: 13px;
}
.studentNum{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 35px;
	font-size: 24px;
	font-weight: bold;
}
.studentPre{
	text-align: center;
	color: #999;
  font-size: 13px;
}
.yipingPreNUme{
	color: #666666;
	font-weight: bold;
}
.right-btn1 {
  float: right;    // 靠右
  height: 100%;
  line-height: 50px;   // 行高
}
.right-btn {
  float: right;    // 靠右
  height: 100%;
  line-height: 50px;   // 行高
}
</style>

